<template>
    <div class="all">
        <el-row :gutter="0">
            <el-col :span="16" :offset="4">
                <div class="box box-1">
                    <div class="introduce-left">
                        <div class="introduce-title">
                            讲师一<span style="font-size: 12px;font-weight: 200;color:#9BA196">（外部）</span>
                        </div>
                        <div class="introduce-box">
                            <div class="box1">
                                <div>座右铭： <span> 暂无内容</span></div>
                                <div>所属单位: <span> 企业系统培训</span></div>
                                <div>研究领域: <span> 暂无内容</span></div>
                                <div>讲师简介: <span> 暂无内容</span></div>
                                <div>工作经历: <span> 暂无内容</span></div>
                            </div>
                            <div class="box1">
                                <div>授课方向: <span> 暂无内容</span></div>
                                <div>擅长领域: <span> 暂无内容</span></div>
                                <div>其他: <span> 暂无内容</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="img-box" style="border-radius: 10px;overflow: hidden;">
                        <el-image style="width: 250px; height: 350px"
                            :src="require('@/assets/imgs/lecturer.png')"></el-image>

                        <div class="popup-box">
                            <el-image style="width: 30px; height: 30px" :src="require('@/assets/imgs/1.png')"></el-image>
                            金牌讲师
                        </div>
                    </div>
                </div>
                <div class="box">
                    <el-tabs v-model="activeIndex">
                        <el-tab-pane label="在线课程" name="1">
                            <lecturerOne />
                        </el-tab-pane>
                        <el-tab-pane label="线下授课" name="2">
                            <lecturerTwo />
                        </el-tab-pane>
                        <el-tab-pane label="讲师荣誉" name="3">
                            <lecturerThree />
                        </el-tab-pane>
                    </el-tabs>
                </div>

                <div style="height: 100px;"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import lecturerOne from './lecturerOne.vue';
import lecturerTwo from './lecturerTwo.vue';
import lecturerThree from './lecturerThree.vue';

export default {
    components: {
        lecturerOne,
        lecturerTwo,
        lecturerThree
    },
    data() {
        return {
            activeIndex: '1',
        }
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
.box {
    min-height: 300px;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
}

.box-1 {
    display: flex;
    justify-content: space-between;

    .introduce-left {
        width: 80%;

        .introduce-title {
            font-size: 26px;
            font-weight: bolder;
            text-decoration: underline;
            text-decoration-color: #9BA196;
        }

        .introduce-box {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .box1 {
                width: 50%;

                >div {
                    margin: 40px 0;
                    font-weight: bolder;

                    >span {
                        color: #9BA196;
                        font-weight: 400;
                    }
                }
            }
        }
    }


    .img-box {
        position: relative;
        height: 350px;

        .popup-box {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40px;
            bottom: 0px;
            background-color: rgba(252, 253, 254, 0.8);
            // background-color: red;
            color: #9BA196;
            font-size: 14px;
        }
    }
}
</style>